{% extends "base.html" %}

{% load user_tags %}

{% block main %}
    <div class="container">
       <div class="my-3 p-3 bg-white rounded box-shadow" style="background-image: url(/media/image/userbg.jpg)">
            <div class="media text-muted pt-3">
                <a href="{{ user.avatar.url }}">
                    <img src="{{ user.avatar.url }}" alt="" class="mr-2 rounded" style="width: 32px; height: 32px">
                </a>
              <div class="media-body pb-3 mb-0 small lh-125">
                <div class="d-flex justify-content-between align-items-center w-100">
                  <strong class="text-gray-dark">{{ user }}</strong>
                  {% check_is_following_user request user as is_following %}
                  {% ifequal user request.user %}
                      <a href="{% url 'users:modify_profile' user.id %}">
                        <i class="fa fa-pencil-square-o" aria-hidden="true"></i> 编辑资料
                      </a>
                  {% else %}
                      <a class="{% if is_following %}text-success{% endif %}" id="follow-user-{{ user.id }}" href="javascript:void(0)"
                        data-login="{% if not request.user.is_authenticated %}un{% endif %}login"
                        data-action="{% if is_following %}un{% endif %}follow"
                        onclick="FollowUser({{ user.id }})">
                        {% if is_following %}
                            <i class="fa fa-check"></i> 已关注
                        {% else %}
                            <i class="fa fa-plus"></i> 关注
                        {% endif %}
                      </a>
                  {% endifequal %}
                </div>
                <span class="d-block">{{ user.signature }}</span>
              </div>
            </div>
        </div>

        <div class="nav-scroller bg-white box-shadow">
            <nav class="nav nav-underline container" >
               <a class="nav-link {% ifequal 'books' data %}active text-success{% endifequal %}" href="?data=books">
                   <i class="fa fa-book" aria-hidden="true"></i> 图书</a>
               <a class="nav-link {% ifequal 'comments' data %}active text-success{% endifequal %}" href="?data=comments">
                   <i class="fa fa-comments-o" aria-hidden="true"></i> 书评</a>
               <a class="nav-link {% ifequal 'followings' data %}active text-success{% endifequal %}" href="?data=followings">
                   <i class="fa fa-user-plus" aria-hidden="true"></i> 关注</a>
               <a class="nav-link {% ifequal 'followers' data %}active text-success{% endifequal %}" href="?data=followers">
                   <i class="fa fa-user-o" aria-hidden="true"></i> 粉丝</a>
            </nav>
        </div>

        <!-- user books data-->
        {% ifequal 'books' data %}
            <div class="my-3 p-3 bg-white rounded box-shadow">
                <h6 class="border-bottom border-gray pb-2 mb-3">{{ info }}上传的图书</h6>
                <div class="row mb-2">
                {% for book in objects %}
                    <div class="col-md-4" id="bok-{{ book.id }}">
                      <div class="card mb-4 box-shadow">
                          <a href="{{ book.get_absolute_url }}">
                              <img class="card-img-top img-fluid flex-auto d-none d-md-block img-thumbnail" src="{{ book.cover_picture.url }}" style="height: 225px;" alt="Card image cap">
                          </a>
                          <div class="card-body">
                              <h5 class="card-title"><a href="{{ book.get_absolute_url }}">{{ book.name }}</a></h5>
                              <div class="d-flex justify-content-between align-items-center">
                                  <div class="btn-group">

                                      {% ifequal request.user user %}
                                           <a href="{% url 'books:edit_book' book.id %}" type="button" class="btn btn-sm bg-light text-info">编辑</a>
                                           <a type="button" class="btn btn-sm bg-light text-info">删除</a>
                                      {% endifequal %}
                                  </div>
                                <small class="text-muted">{{ book.created|date:'Y-m-d' }}</small>
                              </div>
                          </div>
                      </div>
                    </div>
                {% endfor %}

                {% for fake_book in fake_books %}
                    <div class="col-md-4">
                      <div class="card mb-4 box-shadow">
                        <img class="card-img-top" data-src="holder.js/100px225?theme=thumb&bg=55595c&fg=eceeef&text=Thumbnail" alt="Card image cap">
                        <div class="card-body">
                            <h5 class="card-title"><a href="#">book-name-{{ fake_book }}</a></h5>
                            <div class="d-flex justify-content-between align-items-center">
                                <div class="btn-group">
                                    <button type="button" class="btn btn-sm btn-outline-secondary">写书评</button>
                                    <button type="button" class="btn btn-sm btn-outline-secondary">下载</button>
                                </div>
                                <small class="text-muted">{{ fake_book }} 分钟前</small>
                            </div>
                        </div>
                      </div>
                    </div>
                {% endfor %}
            </div>
        </div>
        {% endifequal %}

        <!-- user comments data-->
        {% ifequal 'comments' data %}
             <div class="my-3 p-3 bg-white rounded box-shadow">
                 <h6 class="border-bottom border-gray pb-2 mb-0">{{ info }}的书评</h6>
                 <div id="comment-list">
                     {% for comment in objects %}
                        {% include 'comment-public-item.html' %}
                     {% endfor %}
                 </div>
                <!-- fake comments -->
                <div class="media text-muted pt-3">
                  <img data-src="holder.js/32x32?theme=thumb&bg=007bff&fg=007bff&size=1" alt="" class="mr-2 rounded">
                  <p class="media-body pb-3 mb-0 small lh-125 border-bottom border-gray">
                    <strong class="d-block text-gray-dark">@username</strong>
                    Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
                  </p>
                </div>
                <div class="media text-muted pt-3">
                  <img data-src="holder.js/32x32?theme=thumb&bg=e83e8c&fg=e83e8c&size=1" alt="" class="mr-2 rounded">
                  <p class="media-body pb-3 mb-0 small lh-125 border-bottom border-gray">
                    <strong class="d-block text-gray-dark">@username</strong>
                    Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
                  </p>
                </div>

                <div class="media text-muted pt-3">
                  <img data-src="holder.js/32x32?theme=thumb&bg=6f42c1&fg=6f42c1&size=1" alt="" class="mr-2 rounded">
                  <p class="media-body pb-3 mb-0 small lh-125 border-bottom border-gray">
                    <strong class="d-block text-gray-dark">@username</strong>
                    Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
                  </p>
                </div>

            </div>
        {% endifequal %}

        <!-- user followings data -->
        {% ifequal 'followings' data %}
            <div class="my-3 p-3 bg-white rounded box-shadow">
                <h6 class="border-bottom border-gray pb-2 mb-0">{{ info }}的关注</h6>
                {% for user in objects %}
                    {% check_is_following_user request user as is_following%}
                    <div class="media text-muted pt-3">
                      <a href="{{ user.get_absolute_url }}">
                          <img src="{{ MEDIA_URL }}{{ user.avatar.url }}" alt="" class="mr-2 rounded" style="width: 32px; height: 32px;">
                      </a>

                      <div class="media-body pb-3 mb-0 small lh-125 border-bottom border-gray">
                        <div class="d-flex justify-content-between align-items-center w-100">
                          <strong class="text-gray-dark">{{ user }}</strong>
                          {% ifnotequal user request.user %}
                               <a class="{% if is_following %}text-success{% endif %}" id="follow-user-{{ user.id }}" href="javascript:void(0)"
                                data-login="{% if not request.user.is_authenticated %}un{% endif %}login"
                                data-action="{% if is_following %}un{% endif %}follow"
                                onclick="FollowUser({{ user.id }})">
                                {% if is_following %}
                                    <i class="fa fa-check"></i> 已关注
                                {% else %}
                                    <i class="fa fa-plus"></i> 关注
                                {% endif %}
                            </a>
                           {% endifnotequal %}
                        </div>
                        <span class="d-block">{{ user.signature }}</span>
                      </div>
                    </div>
                {% endfor %}

                <!-- fake data -->
                <div class="media text-muted pt-3">
                  <img data-src="holder.js/32x32?theme=thumb&bg=007bff&fg=007bff&size=1" alt="" class="mr-2 rounded">
                  <div class="media-body pb-3 mb-0 small lh-125 border-bottom border-gray">
                    <div class="d-flex justify-content-between align-items-center w-100">
                      <strong class="text-gray-dark">Full Name</strong>
                      <a href="#">Follow</a>
                    </div>
                    <span class="d-block">@username</span>
                  </div>
                </div>
                <div class="media text-muted pt-3">
                  <img data-src="holder.js/32x32?theme=thumb&bg=007bff&fg=007bff&size=1" alt="" class="mr-2 rounded">
                  <div class="media-body pb-3 mb-0 small lh-125 border-bottom border-gray">
                    <div class="d-flex justify-content-between align-items-center w-100">
                      <strong class="text-gray-dark">Full Name</strong>
                      <a href="#">Follow</a>
                    </div>
                    <span class="d-block">@username</span>
                  </div>
                </div>
                <div class="media text-muted pt-3">
                  <img data-src="holder.js/32x32?theme=thumb&bg=007bff&fg=007bff&size=1" alt="" class="mr-2 rounded">
                  <div class="media-body pb-3 mb-0 small lh-125 border-bottom border-gray">
                    <div class="d-flex justify-content-between align-items-center w-100">
                      <strong class="text-gray-dark">Full Name</strong>
                      <a href="#">Follow</a>
                    </div>
                    <span class="d-block">@username</span>
                  </div>
                </div>
                <small class="d-block text-right mt-3">
                  <a href="#">全部书友</a>
                </small>
            </div>
        {% endifequal %}

        <!-- user follower data -->
        {% ifequal 'followers' data %}
            <div class="my-3 p-3 bg-white rounded box-shadow">
                <h6 class="border-bottom border-gray pb-2 mb-0">{{ info }}的粉丝</h6>
                {% for user in objects %}
                    {% check_is_following_user request user as is_following%}
                    <div class="media text-muted pt-3">
                      <a href="{{ user.get_absolute_url }}">
                          <img src="{{ user.avatar.url }}" alt="" class="mr-2 rounded" style="width: 32px; height: 32px;">
                      </a>

                      <div class="media-body pb-3 mb-0 small lh-125 border-bottom border-gray">
                        <div class="d-flex justify-content-between align-items-center w-100">
                          <strong class="text-gray-dark">{{ user }}</strong>
                          {% ifnotequal user request.user %}
                               <a class="{% if is_following %}text-success{% endif %}" id="follow-user-{{ user.id }}" href="javascript:void(0)"
                                data-login="{% if not request.user.is_authenticated %}un{% endif %}login"
                                data-action="{% if is_following %}un{% endif %}follow"
                                onclick="FollowUser({{ user.id }})">
                                {% if is_following %}
                                    <i class="fa fa-check"></i> 已关注
                                {% else %}
                                    <i class="fa fa-plus"></i> 关注
                                {% endif %}
                            </a>
                           {% endifnotequal %}
                        </div>
                        <span class="d-block">{{ user.signature }}</span>
                      </div>
                    </div>
                {% endfor %}
                <!-- fake data -->
                <div class="media text-muted pt-3">
                  <img data-src="holder.js/32x32?theme=thumb&bg=007bff&fg=007bff&size=1" alt="" class="mr-2 rounded">
                  <div class="media-body pb-3 mb-0 small lh-125 border-bottom border-gray">
                    <div class="d-flex justify-content-between align-items-center w-100">
                      <strong class="text-gray-dark">Full Name</strong>
                      <a href="#">Follow</a>
                    </div>
                    <span class="d-block">@username</span>
                  </div>
                </div>
                <div class="media text-muted pt-3">
                  <img data-src="holder.js/32x32?theme=thumb&bg=007bff&fg=007bff&size=1" alt="" class="mr-2 rounded">
                  <div class="media-body pb-3 mb-0 small lh-125 border-bottom border-gray">
                    <div class="d-flex justify-content-between align-items-center w-100">
                      <strong class="text-gray-dark">Full Name</strong>
                      <a href="#">Follow</a>
                    </div>
                    <span class="d-block">@username</span>
                  </div>
                </div>
                <div class="media text-muted pt-3">
                  <img data-src="holder.js/32x32?theme=thumb&bg=007bff&fg=007bff&size=1" alt="" class="mr-2 rounded">
                  <div class="media-body pb-3 mb-0 small lh-125 border-bottom border-gray">
                    <div class="d-flex justify-content-between align-items-center w-100">
                      <strong class="text-gray-dark">Full Name</strong>
                      <a href="#">Follow</a>
                    </div>
                    <span class="d-block">@username</span>
                  </div>
                </div>
                <small class="d-block text-right mt-3">
                  <a href="#">全部书友</a>
                </small>
            </div>
        {% endifequal %}
    </div>
{% endblock %}
